Vue.component('currency-input', {
	template: '\
		    <div>\
		      <label v-if="label">{{ label }}</label>\
		      $\
		      <input\
		        ref="input"\
		        v-bind:value="value"\
		        v-on:input="updateValue($event.target.value)"\
		        v-on:focus="selectAll"\
		        v-on:blur="formatValue"\
		      >\
		    </div>\
		  ',
	props: {
		value: {
			type: Number,
			default: 0
		},
		label: {
			type: String,
			default: ''
		}
	},
	mounted: function() {
		this.formatValue()
	},
	methods: {
		updateValue: function(value) {
			var result = currencyValidator.parse(value, this.value)
			if (result.warning) {
				this.$refs.input.value = result.value
			}
			this.$emit('input', result.value)
		},
		formatValue: function() {
			this.$refs.input.value = currencyValidator.format(this.value)
		},
		selectAll: function(event) {
			// Workaround for Safari bug
			// http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome
			setTimeout(function() {
				event.target.select()
			}, 0)
		}
	}
})

new Vue({
	el: '#app',
	data: {
		price: 0,
		shipping: 0,
		handling: 0,
		discount: 0
	},
	computed: {
		total: function() {
			return ((
				this.price * 100 +
				this.shipping * 100 +
				this.handling * 100 -
				this.discount * 100
			) / 100).toFixed(2)
		}
	}
})